<template>
  <fks-input
    ref="input"
    v-bind="$attrs"
    v-model="valueIn"
    :maxlength="maxlengthIn"
    @input="handleInput"
    @blur="handleBlur"
  >
    <template slot="prefix">
      <slot name="prefix"></slot>
    </template>
    <template slot="suffix">
      <slot name="suffix"></slot>
    </template>
    <template slot="prepend">
      <slot name="prepend"></slot>
    </template>
    <template slot="append">
      <slot name="append"></slot>
    </template>
  </fks-input>
</template>

<script>
export default {
  name: 'FksAmount',
  props: {
    thousandth: {
      type: Boolean,
      default: false
    },
    value: {
      required: true
      // type: [Number, String]
    },
    limit: {
      type: Number,
      default: 0
    },
    min: {
      type: [Number, String],
      default: 0
    },
    max: {
      type: [Number, String],
      default: 999999999999999
    },
    maxlength: {
      type: [Number, String],
      default: 15,
      validator: function (value) {
        //最大长度只能为15位，因为parseFloat的精度最高只能16位，999999999999999以及更高了数据会出错
        return value <= 20 && value > 0
      }
    }
  },

  data() {
    return {
      valueIn: this.value
      // valueType: 'string'
    }
  },
  computed: {
    //将最大值和最小值转换为数字，方便和字符串做比较
    minIn() {
      if (!this.min) {
        return 0
      } else {
        return parseInt(this.min)
      }
    },
    maxIn() {
      if (!this.max) {
        return 999999999999999
      } else {
        return parseInt(this.max)
      }
    },
    maxlengthIn() {
      return parseInt(this.maxlength)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        // this.valueType = typeof newVal
        this.valueIn = String(newVal)
        this.handleBlur()
      }
    }
  },
  methods: {
    handleInput() {
      this.valueIn = this.valueIn.replace(/[^\d.]/g, '')
    },
    handleBlur() {
      //值为空，直接返回
      if (!this.valueIn) {
        this.$emit('input', '')
        return
      }
      if (this.valueIn < this.minIn) {
        this.valueIn = this.minIn
      } else if (this.valueIn > this.maxIn) {
        this.valueIn = this.maxIn
      }
      this.valueIn = String(this.valueIn)
      //有,说明处理过，直接返回
      if (this.valueIn.indexOf(',') !== -1) {
        return
      }
      this.valueIn = parseFloat(this.valueIn).toFixed(this.limit)
      //如果是NaN则将值置空
      if (isNaN(this.valueIn)) {
        this.valueIn = ''
      }
      let valueOut = this.valueIn
      // if (this.valueType === 'string') {
      //   valueOut = String(this.valueIn)
      // }
      // if (this.valueType === 'number') {
      //   valueOut = Number(this.valueIn)
      // }
      if (this.thousandth) {
        this.valueIn = this.comdify(this.valueIn)
      }
      this.$emit('input', valueOut)
    },
    comdify(value) {
      if (!value) return value
      let str = value.split('.')
      let n1 = this.formatNumber(str)
      return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}`
    },
    formatNumber(num) {
      var groups = /([-+]?)(\d*)(\.\d+)?/g.exec('' + num),
        mask = groups[1], //符号位
        integers = (groups[2] || '').split(''), //整数部分
        decimal = groups[3] || '', //小数部分
        remain = integers.length % 3

      var temp = integers
        .reduce(function (previousValue, currentValue, index) {
          if (index + 1 === remain || (index + 1 - remain) % 3 === 0) {
            return previousValue + currentValue + ','
          } else {
            return previousValue + currentValue
          }
        }, '')
        .replace(/,$/g, '')
      return mask + temp + decimal
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::v-deep input[type='number'] {
  -moz-appearance: textfield;
}
</style>
